<template>
  <div class="menu">
    <div class="top">
          <van-row>
            <van-col span="3">
              <van-tabbar>
                <van-tabbar-item><img :src="img.tab_img" alt="" @click="ontab"></van-tabbar-item>
              </van-tabbar>
            </van-col>
            <van-col span="3">
              <van-tabbar>
                <van-tabbar-item info="3"><img :src="img.thebll_img" alt=""></van-tabbar-item>
              </van-tabbar>
            </van-col>
            <van-col span="3">
              <van-tabbar>
                <van-tabbar-item info="3"><img :src="img.order_img" alt=""></van-tabbar-item>
              </van-tabbar>
            </van-col>
            <van-col span="15">
              <div class="search_content">
                  <input type="text" v-model="keywords" placeholder="搜索桌号" class="search">
                  <div class="search_icon" @click="onsearch">
                    <van-icon name="search"/>
                  </div>
              </div>
            </van-col>
          </van-row>
    </div>
    <div class="desk_menu">
        <van-row>
          <van-col span="12"  v-for="item in 7"  class="desk_item">
            <div class="desk_num">{{item+1}}号桌</div>
            <div>
              <img :src="img.desk_img" alt="">
            </div>
            <div class="desk_status">
              <div><span  class="people_num">{{item}}</span>个人</div>
              <div class="people_num">已下单</div>
            </div>
          </van-col>
        </van-row>
    </div>
    <!-- tab -->
    <div class="tab" v-show="tabShow">
      <ul>
        <li class="tab_item" v-for="(item, index) in tab" :key="index" @click="onUrl">
          <router-link :to="item.url">
            <i><img :src="item.icon" alt=""></i>
              <span class="tab_name">{{item.name}}</span>
            </router-link>
        </li>
      </ul>
    </div>
    <!-- 订单弹框 -->
    <div class="order_modal">
      <van-popup v-model="show">
        <div class="orderMcontent">
           <van-row span='12'>
              <van-col span="4" v-for="item in 6"  class="plate_item">
                <div></div>
              </van-col>
           </van-row>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import { Tabbar, TabbarItem } from 'vant';
export default {
  data(){
      return{
        img:{
          tab_img:require('../assets/img/tab_img.png'),
          thebll_img:require('../assets/img/thebll.png'),
          desk_img:require('../assets/img/desk.png'),
          order_img:require('../assets/img/new_order.png')
        },
        keywords:'',
        tab:[
            {name:'收银', icon:require('../assets/img/tab_icon/cashier.png'),url:'menu'},
            {name:'账单', icon:require('../assets/img/tab_icon/bill.png'),url:'bill'},
            {name:'菜品管理', icon:require('../assets/img/tab_icon/Food-management.png'),url:'foodmanage'},
            {name:'信息统计', icon:require('../assets/img/tab_icon/Statistical-information.png'),url:'statistical'},
            {name:'后台信息管理', icon:require('../assets/img/tab_icon/The-background-information.png'),url:'backinformation'},
            {name:'权限管理', icon:require('../assets/img/tab_icon/Rights-management.png'), url:'rights'},
            {name:'订单详情', icon:require('../assets/img/tab_icon/order-detail.png') , url:'orderdetail'},
            {name:'活动管理', icon:require('../assets/img/tab_icon/Activity-management.png'), url:'acticitymanage'},
            {name:'资金管理', icon:require('../assets/img/tab_icon/Money-management.png'), url:'moneymanage'},
            {name:'退出', icon:require('../assets/img/tab_icon/exit.png'), url:''}
          ],
        tabShow:false,
        show:true
      }
  },
  methods:{
    onsearch(){
      Toast(this.keywords);
    },
    ontab(){
      this.tabShow = !this.tabShow;
    },
    onUrl(){
      console.log(99)
    }
  }
}
</script>

<style scoped lang='less'>
    .top{
      padding:0.2933rem 0.4267rem;
      text-align: center;
    }
    .search{
      background: url('../assets/img/input_kuang.png') no-repeat;
      width:5.5733rem;
      height:0.7467rem;
      background-size:100% 100%;
      border:none;
      color: #fff;
      font-size: 0.2667rem;
      padding-left: 0.32rem;
    }
    .search_content{
      position: relative;
    }
    .van-icon{
      color: #000;
      font-size: 0.4rem;
    }
    .search_icon{
      position: absolute;
      right: 0rem;
      top: 0.08rem;
      width: 0.6933rem;
      height: 0.7467rem;
    }
    .desk_menu{
    text-align: center;
    }
    .desk_item{
      position: relative;
    }
    .desk_num{
      font-size: 0.3733rem;
      font-weight: bold;
      text-align: left;
      padding-left: 1.3067rem;
      padding-bottom: 0.1867rem;
    }
    .desk_status{
      font-size: 0.3733rem;
      font-weight: bold;
      position: absolute;
      top: 1.6533rem;
      left: 2rem;
    }
    .people_num{
      color: red;
    }
    .tab{
      background: url('../assets/img/tab_back.png') no-repeat;
      height:8rem;
      width:2.72rem;
      background-size: 100% 100%;
      position: absolute;
      top: 1.2533rem;
      left: 0.5067rem;

    }
    span.tab_name{
     padding-left:0.0533rem;

    }
    .tab_item{
      font-size: 0.32rem;
      font-weight: bold;
      height:0.8rem;
      line-height: 0.8rem;
      border-bottom: 0.0267rem solid ;
      border-image:url('../assets/img/tab_line.png') 1 1 round;
      padding-left:0.1333rem;
    }
    .tab_item img{
      vertical-align: middle;
      width:0.4267rem;
      height: 0.4267rem;
    }
    .van-tabbar-item__text img{
      width:0.7467rem;
      height:0.7467rem;
    }
    .desk_menu img{
      width:3.44rem;
      height:3.04rem;
    }
    .van-tabbar--fixed{
      position: relative;
      background: transparent;
    }
    .van-hairline--top-bottom::after{
          border-width: 0rem 0; 
    }
    .orderMcontent{
      width:8.0533rem;
      height:10.2667rem;
      background: url("../assets/img/plate.png") no-repeat;
      background-size: 100% 100%;
    }
    .plate_item{
      width:2rem;
      height:2rem;
      background: url("../assets/img/plate_item.png") no-repeat;
      background-size: 100% 100%;
      margin:10px;
    }
</style>
<style>
    .menu .van-tabbar-item__icon .van-icon__info{
        color: #fff;
        left: 50%;
        top: 0;
        font-size: .5em;
        margin-left: .8em;
        padding: 0 .3em;
        text-align: center;
        min-width: 1.2em;
        line-height: 1.2;
        position: absolute;
        border-radius: .6em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #f44;
        font-family: PingFang SC,Helvetica Neue,Arial,sans-serif;
    }
</style>



